<template>
  <dialog-box
    :isDialog="false"
    ref="myDialog"
    :showFooter="true"
    width="800px"
    sureName="生成表"
    @close="close"
    @sureHandle="sureHandle"
    :isFooterSlot="true"
    title="生成SQL表"
  >
    <template v-slot:dialogMain>
      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          size="default"
          status-icon
        >
          <el-form-item label="SQL表名称">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="SQL脚本">
            <div class="sql-box">
              <div class="mb-10 jut-end">
                <el-button type="primary" @click="getHistorical">历史脚本</el-button>
              </div>
              <div class="mb-10">
                <el-input
                  v-model="ruleForm.name"
                  :rows="5"
                  type="textarea"
                  placeholder="Please input"
                />
              </div>
              <div class="jut-end">
                <el-button>重置</el-button>
                <el-button type="primary">运行</el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="展示结果">
            <hsa-table v-bind="tableOption" auto-height />
          </el-form-item>
        </el-form>
      </div>
    </template>
  </dialog-box>
</template>

<script setup lang="ts">
import { onMounted, computed, reactive, toRefs, ref } from "vue";
import {
  type ComponentSize,
  type FormInstance,
  type FormRules,
  ElMessage,
} from "element-plus";
// 类型
import type { HsaTableColumn } from "hsa-ui";
const myDialog = ref(null);

const ruleFormRef = ref<FormInstance>();

const emit = defineEmits(["sureHandle", "historicalHandle"]);

const ruleForm = ref({
  name: "",
  comp: "",
  region: "",
});

let state = reactive({
});
const getHistorical = () => {
  let obj = Object.assign({}, { ...ruleForm.value });
  // obj.tabelData = tableOption.data;

  emit("historicalHandle",obj);
  close();
};
// 表格配置
const tableOption = reactive({
  data: ref<any[]>([
    {
      date: "2016-05-02",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-04",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-01",
      name: "王小虎",
      state: "驱动类型",
      city: "192.168.168.222",
      zip: "端口",
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "65535",
    },
  ]),
  paginationEnable: false,
  columns: ref<HsaTableColumn[]>([
    { align: "center", label: "数据集名称", prop: "date" },
    { align: "center", label: "关联", prop: "name" },
    { align: "center", label: "字段配置", prop: "state" },
    { align: "center", label: "数据探索", prop: "city" },
  ]),
});
// 定义完成后，用defineExpose()暴露给父组件
const open = (data: any) => {
  resetForm();
  if (data) {
    console.log(data, "111");
    ruleForm.value = Object.assign({}, { ...data });
  }
  myDialog.value.handleOpen();
};
const close = () => {
  myDialog.value.handleClose();
};
const sureHandle = () => {
  submitForm();
};
defineExpose({
  open,
  close,
});

const submitForm = async () => {
  if (!ruleFormRef) return;
  await ruleFormRef.value?.validate((valid, fields) => {
    if (valid) {
      console.log(Object.assign({}, { ...ruleForm.value }), "submit!");
      // console.log(toRefs(ruleForm), "submit!");
      ElMessage({
        type: "success",
        message: "生成成功!",
      });
      emit("sureHandle", Object.assign({}, { ...ruleForm.value }));
      close();
    }
  });
};

const resetForm = () => {
  if (!ruleFormRef) return;
  ruleFormRef.value?.resetFields();
  ruleForm.value = {}
};
const rules = reactive<FormRules<RuleForm>>({
  // name: [{ required: true, message: "请选择字段", trigger: "blur" }],
});
</script>

<style lang="scss" scoped>
.mb-10{
  margin-bottom: 10px;
}
.jut-end{
  display: flex;
  justify-content: flex-end;
}
.sql-box{
  width: 100%;
  margin-bottom: 20px;
}
</style>
